<template>
  <div class="cardLists">
    <div class="addBtn" @click="addCard" v-show='config.isEdie'>
      <slot name="cardhead" >
        <a-icon type="file-add" /><span>新增</span>
      </slot>
    </div>
    
    <div>
      <a-row :gutter="[8, 8]">
        <a-col :span="4" v-for="(item, index) in cardLists" :key="index">
          <div class="cardBox">
            
            <div class="delBtn" @click="deleteCard($event, index)" v-show='config.isEdie'>
              <a-tooltip  placement="topLeft" title="删除信息"></a-tooltip>
                <a-icon type="delete" />
              </a-tooltip> 
            </div>
          
            <slot name="cardBody" v-bind:item="item"></slot>

          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "slotCardLists",
  components: {},
  props: {
    option: Object,
    cardLists: Array
  },
  data() {
    return {
      defaultConfig:{
        isEdie:true
      }
    };
  },
  computed: {
    config:function () {
      let obj = Object.assign({},this.defaultConfig,this.option)
      return obj
    },
  },
  watch: {
    // imgList: function(newVal, oldVal) {
    //   let _this = this;
    //   newVal.forEach((item, index) => {
    //     _this.fileList.push(item);
    //   });
    // }
  },
  methods: {
    addCard() {
      let card = Object.assign({},this.cardLists[0])
      for (const key in card) {
        if (Object.hasOwnProperty.call(card, key)) {
          if (key.indexOf("Lists") == -1) {
            card[key] = "";
          }
        }
      }

      this.cardLists.push(card);
    },

    deleteCard(e, index) {
      let _this = this;
      if (_this.cardLists.length > 1) {
        this.$Modal.confirm({
          title: "是否删除?",
          onOk() {
            _this.cardLists.splice(index, 1);
          },
          onCancel() {}
        });
      } else {
        this.$message.warning("最少保留一条信息");
      }
    }
  },
  mounted() {}
};
</script>

<style scoped="scoped">

.cardLists {
  padding: 0px 8px;
}

.cardBox {
  border: 1px solid #e8e8e8;
  padding: 8px 8px;
  border-radius: 4px;
  position: relative;
}

.addBtn {
  text-decoration: underline;
  color: #1890ff;
  cursor: pointer;
}

.delBtn {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 24px;
  height: 24px;
  color: #1890ff;
  cursor: pointer;
}
</style>
